<template>
  <!--拟态-->
  <el-dialog
    v-model="formModel"
    :title="title"
    :visible.sync="dialogFormVisible"
    :before-close="handleClose"
    v-el-drag-dialog
  >
    <el-form :model="formModel" label-width="120px" ref="dataForm" :rules="dataRule">
      <el-form-item label="规格名称:" prop="attributeName">
        <el-input v-model="formModel.attributeName" @input="change"/>
      </el-form-item>
      <el-form-item label="规格列表" prop="attributeList">
        <el-input v-model="formModel.attributeList" @input="change"></el-input>
      </el-form-item>
      <el-form-item label="新建人" prop="createId">
        <el-input v-model="formModel.createId" @input="change" :disabled="true"></el-input>
      </el-form-item>
      <!--<el-form-item label="删除标记">
        <el-radio-group v-model="formModel.deleteFlag">
          <el-radio :label="true" border @change="change">可用</el-radio>
          <el-radio :label="false" border @change="change">禁用</el-radio>
        </el-radio-group>
      </el-form-item>-->
      <el-form-item label="是否启用规格">
        <el-radio-group v-model="formModel.enableFlag">
          <el-radio :label="true" border @change="change">可用</el-radio>
          <el-radio :label="false" border @change="change">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="id" prop="id">
        <el-input v-model="formModel.id" @input="change" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="是否自定义属性" prop="inputFlag">
        <el-radio-group v-model="formModel.inputFlag">
          <el-radio :label="true" border @change="change">可用</el-radio>
          <el-radio :label="false" border @change="change">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="修改人" prop="updateId">
        <el-input v-model="formModel.updateId" @input="change" :disabled="true"></el-input>
      </el-form-item>
      <!--<el-form-item label="修改人时间" prop="updateTime">
        <el-input v-model="formModel.updateTime" @input="change" :disabled="true"></el-input>
      </el-form-item>-->
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cliearvisible">取 消</el-button>
      <el-button type="primary" @click="commitForm()">确 定</el-button>
    </div>
  </el-dialog>
  <!--end拟态-->
</template>

<script>
import mixtoggle from "@/commons/content/mixin/mixin.js";

export default {
  name: "list-add-or-update",
  data() {
    return {
      dialogFormVisible: true,
      formModel: {
        attributeList: "",
        attributeName: "",
        createId: "",
        createTime: "",
        deleteFlag: true,
        enableFlag: true,
        id: 0,
        inputFlag: true,
        updateId: "",
        updateTime: ""
      },
      title: "",
      dataRule: {
        attributeName: [
          { required: true, message: "名字不能为空", trigger: "blur" }
        ]
      }
    };
  },
  mixins: [mixtoggle],
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(res => {
          this.$emit("refreshDataList");
        })
        .catch(err => {});
    },
    addOrUpdateVisible(id) {
      // 判断修改还是新增
      if (!id) {
        this.title = "新增规格属性";
        this.formModel.createId = this.user.data.account;
      } else {
        this.title = "修改规格属性";
        this.formModel.id = id;
        this.formModel.updateId = this.user.data.account;
        this.getSizeInfo(this.formModel.id);
      }
    },
    change() {
      // 刷新form表单
      this.$forceUpdate();
    },
    cliearvisible() {
      //点击取消按钮
      this.$emit("refreshDataList");
    },
    commitForm() {
      if (!this.formModel.id) {
        //新增数据处理
        this.formModel.createId = parseInt(this.user.data.id);
      } else {
        this.formModel.updateId = parseInt(this.user.data.id);
      }
      // 数据校验和核对
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/attribute/${!this.formModel.id ? "save" : "update/"+ this.formModel.id}`
            ),
            method: "post",
            data: this.$http.adornData({
              attributeList: this.formModel.attributeList,
              attributeName: this.formModel.attributeName,
              createId: this.formModel.createId,
              deleteFlag: this.formModel.deleteFlag,
              enableFlag: this.formModel.enableFlag,
              id: this.formModel.id || 0,
              inputFlag: this.formModel.inputFlag,
              updateId: this.formModel.updateId,
              updateTime: this.formModel.updateTime
            })
          }).then(({ data }) => {
            if (data && data.status === 200) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              console.log(data);
              this.$message.error(data.message);
            }
          });
        } else {
          return false;
        }
      });
    },
    async getSizeInfo(id) {
      // 通过id获取详情
      await this.$http({
        url: this.$http.adornUrl(`/attribute/get/${this.formModel.id}`),
        method: "get"
      }).then(res => {
        let obj = res.data.data;
        if(res.data.status === 200){
        this.formModel.attributeList = obj.attributeList;
        this.formModel.attributeName = obj.attributeName;
        this.formModel.id = obj.id;
        this.formModel.inputFlag = obj.inputFlag;
        this.formModel.enableFlag = obj.enableFlag;
        this.formModel.createId = obj.createName;
        this.formModel.updateId = obj.updateName;
        }else{
          this.$message.error('数据获取失败')
        }
      });
    }
  },
  mounted() {
    (async () => {
      // 组件创建的时候使用mixin来获取用户名
      await this.getUser();
    })();
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>